<template>
  <div class="system-overview-main">
    <div class="main-title">快捷入口</div>
    <div class="overview-main-top">
      <div class="common-icon">
        <i class="iconfont icon-erji-zhengwuyun"></i>
      </div>
      <div class="top-content">
        <div class="top-content-network">
          <div class="overview-title">政务网</div>
          <div class="network-main">提供政务网资源的管理及监控能力</div>
        </div>
        <div class="top-content-manage">
          <div class="manage-unify">
            <div class="manage-unify-title">
              <div class="overview-title">网络管理</div>
              <div class="enter-button" @click="goManage('1')">进入</div>
            </div>
          </div>
          <div class="manage-unify">
            <div class="manage-unify-title">
              <div class="overview-title">云管理</div>
              <div
                class="enter-button"
                @click="goManage('2')"
              >
                进入
              </div>
            </div>
          </div>
          <div class="manage-unify">
            <div class="manage-unify-title">
              <div class="overview-title">动环管理</div>
              <div class="enter-button" @click="goManage('3')">进入</div>
            </div>
          </div>
          <div class="manage-unify">
            <div class="manage-unify-title">
              <div class="overview-title">哑资源可视化</div>
              <div class="enter-button" @click="goManage('4')">进入</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="overview-main-middle">
      <div class="middle-network" @click="goManage('5')">
        <div class="common-icon">
          <i class="iconfont icon-wulianwang"></i>
        </div>
        <div class="manage-unify network-content">
          <div class="manage-unify-title">
            <div class="overview-title">物联网</div>
          </div>
          <div class="manage-unify-main">提供感知终端、感知载体的管理能力</div>
        </div>
      </div>
      <div
        class="middle-network"
        @click="goManage('6')"
        style="background: rgba(0, 0, 0, 0.5)"
      >
        <div class="common-icon">
          <i class="iconfont icon-shipin"></i>
        </div>
        <div class="manage-unify network-content">
          <div class="manage-unify-title">
            <div class="overview-title">视频网</div>
          </div>
          <div class="manage-unify-main">
            提供视频监控设备管理、运行监控及视频流查看等能力
          </div>
        </div>
      </div>
    </div>
    <div class="overview-main-middle">
      <div
        class="middle-network"
        @click="goManage('7')"
        style="background: rgba(0, 0, 0, 0.5)"
      >
        <div class="common-icon">
          <i class="iconfont icon-sheshiguanli"></i>
        </div>
        <div class="manage-unify network-content">
          <div class="manage-unify-title">
            <div class="overview-title">其他设施</div>
          </div>
          <div class="manage-unify-main">
            提供其他信息化关键基础设施的管理能力
          </div>
        </div>
      </div>
      <div
        class="middle-network"
        @click="goManage('8')"
        style="background: rgba(0, 0, 0, 0.5)"
      >
        <div class="common-icon">
          <i class="iconfont icon-jizhan"></i>
        </div>
        <div class="manage-unify network-content">
          <div class="manage-unify-title">
            <div class="overview-title">移动网</div>
          </div>
          <div class="manage-unify-main">
            提供基站、1.4G、WIFI等移动网基础设施的管理能力
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    goManage(type) {
      switch (type) {
        case "1":
          window.open(`http://10.163.208.184:18080/XICHENG/#/`);
          break;
        case "2":
          window.open(`http://10.163.208.184:18080/XICHENG_CLOUD/#/`);
          break;
        case "3":
          window.open(`http://10.163.208.184:18080/XICHENG_DH/#/`);
          break;
        case "4":
          window.open(`http://10.163.208.225:18100`);
          break;
        case "5":
          window.open(`http://10.163.208.225:18300`);
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@function rem($args) {
  @return calc(100vh * #{$args} / 1080);
}
.system-overview-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: rem(10);
  height: 100%;
  font-size: rem(18);
  .overview-title {
    font-size: rem(20);
  }
  .common-icon {
    display: flex;
    align-items: center;
    width: rem(80);
    padding: rem(10) rem(15);
    height: 100%;
    background: #1150a1;
    img {
      width: rem(50);
      height: rem(56);
    }
  }
  .overview-main-top {
    flex: 1;
    display: flex;
    padding: rem(5) rem(5) rem(5) 0;
    background: #1150a1;
    box-sizing: border-box;
    border: 1px solid #dee5fc;
    border-radius: rem(8);
    .top-content {
      flex: 1;
      background: #ffffff;
      padding: rem(10);
      border-radius: rem(0) rem(10) rem(10) rem(0);
      &-network {
        display: flex;
        align-items: center;
        // height:rem(25);
        height: 30%;
        .overview-title {
          width: rem(70);
          font-size: rem(22);
        }
        .network-main {
          text-overflow: ellipsis;
        }
      }
      &-manage {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: 60%;
      }
      //   &-manage :nth-child(odd) {
      //     padding-left: 0;
      //   }
      &-manage :nth-child(even) {
        border: none;
      }
    }
  }
  .manage-unify {
    width: 50%;
    padding: rem(5);
    border-right: 1px solid #1e3a54;
    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-main {
      margin-top: rem(5);
      color: #666666;
    }
  }
  .manage-unify:last-of-type {
    border: none;
  }
  .network-content {
    width: 100%;
  }
  .overview-main-middle {
    display: flex;
    height: 30%;
    gap: rem(15);
    .middle-network {
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 50%;
      border-radius: rem(8);
      background-color: #ffffff;
      border:1px solid #dee5fc;
      &:hover{
         cursor: pointer;
      }
      .overview-title {
        font-size: rem(22);
      }
    }
  }
  .overview-main-bottom {
    height: 30%;
    border: 1px solid #1e3a54;
  }
}
.enter-button {
  width: rem(50);
  height: rem(20);
  text-align: center;
  line-height: rem(20);
  border-radius: rem(3);
  opacity: 1;
  background: #dee5fc;
  box-sizing: border-box;
  border: 1px solid #7e98e7 !important;
  font-size: rem(18);
  color: #6483e4;
}
.enter-button:hover {
  cursor: pointer;
  background-color: #1150a1;
}
.iconfont {
  font-size: rem(56);
  color: #ffffff;
}
</style>